﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <meta content="width=device-width, user-scalable=no" name="viewport"/>
    <meta content="telephone=no" name="format-detection"/>
    <title></title>
    <script src="echarts.min.js"></script>
    <script src="jquery.min.js"></script>
    <style>

        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .left_right {
            width: 100%;
            overflow: hidden;
            font-size: 4.5vw;
            text-align: center;
            line-height: 12vw;
            background-color: #f8f8f8;
        }

        .left_right .left {
            float: left;
            width: 100%;
        }

        .left_content {
            overflow: hidden
        }

        .left_content .content_div {
            overflow: hidden;
            float: left;
            margin-bottom: 7%;
        }

        .left_content .content_div .content_div_title {
            text-align: center;
            font-size: 4vw;
            margin-top: 20px;
            height: 25px;
            color: #606060;
        }

        .left_content .content_div .content_div_pie {
            width: 25vw;
            height: 35vw;
        }


    </style>
    <script>
        window.onload = function () {
            var content = '[{\"brand\":\"QQ星\",\"count\":1159.0,\"rate\":65.0},{\"brand\":\"舒化\",\"count\":1159.0,\"rate\":32.0},{\"brand\":\"金典\",\"count\":1159.0,\"rate\":23},{\"brand\":\"优酸乳\",\"count\":1159.0,\"rate\":0.0},{\"brand\":\"味可滋\",\"count\":1159.0,\"rate\":0.0},{\"brand\":\"学生奶\",\"count\":1159.0,\"rate\":0.0},{\"brand\":\"安慕希\",\"count\":1159.0,\"rate\":0.0},{\"brand\":\"畅意100%\",\"count\":1159.0,\"rate\":0.0},{\"brand\":\"液奶母品牌\",\"count\":1159.0,\"rate\":0.0}]';
            JavaCallJs(content);
        }


    </script>
</head>
<body>
<div class="left_content" id="leftId"></div>
</body>
<script type="text/javascript">
    function JavaCallJs(content) {

        //设置左边图表数据
        $("#leftId").empty();
        var div = document.createElement("div");
        div.id = "newDivLeft";
        div.className = 'content_div';
        div.style.width = document.documentElement.clientWidth + 'px';

        //图表标题div
        <!--        var div1 = document.createElement("div");-->
        <!--        div1.id = "new1DivLeft";-->
        <!--        div1.className = 'content_div_title';-->
        <!--        div1.innerHTML = "当月产品销量";-->
        <!--        div1.style.fontSize = "larger";-->
        <!--        div1.style.color = "black";-->
        <!--        div.appendChild(div1);-->

        //图表div
        var div2 = document.createElement("div");
        div2.id = "new2DivLeft";
        div2.className = 'content_div_pie';
        div2.style.width = document.documentElement.clientWidth + 'px';
        div2.style.height = document.documentElement.clientHeight + 'px';
        div.appendChild(div2);

        //设置圆形图表
        setChart(content, div2);
        $("#leftId").append(div);
    }

    function setChart(item, div) {
        var myChart = echarts.init(div);
        //rate:比率    brand：品牌名   sumCount：门店总数    marketCount：门店铺市率
        var json = JSON.parse(item);
        var name = [];
        var value = [];
        var maxNum = 0;
        for (let i = 0; i < json.length; i++) {
            name.push(json[i].brand);
            value.push((json[i].rate * 100))
            if (json[i].sumCount > maxNum) {
                maxNum = json[i].sumCount;
            }
        }

        const labelSetting = {
            show: true,
            position: 'top',
            formatter: function (param) {
                console.log(param)
                return json[param.dataIndex].marketCount + '\n(' + param.value.toFixed(1) + '%)';
            },
            fontSize: 8,
        };

        var option = {
            grid: {
                left: '2%', //
                right: '2%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: name.map(function (nameStr) {
                    var strs = nameStr.split(''); //字符串数组
                    var str = ''
                    for (var i = 0, s; s = strs[i++];) { //遍历字符串数组
                        str += s;
                        if (!(i % 1)) str += '\n'; //按需要求余
                    }
                    return str
                }),
                axisLabel: {
                    textStyle: {
                        fontStyle: 'oblique',
                    }
                },

            },
            yAxis: [
                {
                    type: 'value',
                    name: '铺市率(%)',
                    min: 0,
                    max: 100,
                    interval: 10,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisLine: {                  //---坐标轴 轴线
                        show: true,                  //---是否显示
                        //------------------- 线 -------------------------
                        lineStyle: {
                            color: '#1E90FF',
                            width: 1,
                            type: 'solid',
                        },
                    },
                },
                {
                    type: 'value',
                    name: '铺市门店数',
                    min: 0,
                    max: maxNum,
                    interval: Math.round(maxNum / 10),
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisLine: {                  //---坐标轴 轴线
                        show: true,                  //---是否显示
                        //------------------- 线 -------------------------
                        lineStyle: {
                            color: '#1E90FF',
                            width: 1,
                            type: 'solid',
                        },
                    },
                },
            ],
            series: [
                {
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = ['#91cc75', '#fac858', '#c99979', '#73c0de',
                                    '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc',
                                    '#54211d', '#f15a22', '#ffe600', '#228fbd',
                                    '#b54334', '#6f60aa', '#ea66a6', '#40835e'];
                                return colorList[params.dataIndex]
                            }
                        },
                    },
                    data: value,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    },
                    // label: {
                    //     show: true,
                    //     position: 'top',
                    //     formatter: value.+'({c}%)',
                    // },
                    label: labelSetting
                }
            ]
        }
        myChart.setOption(option);
    }

</script>
</html>